<template>
  {{ count }}
</template>
<script setup lang="ts">
import { $ref, $$, $ } from 'vue/macros'

// 响应式语法糖,针对 Ref 对象,采用该语法糖形式,不必额外调用 Ref.value 属性访问其值
// 编译上仍调用 Ref.value ,仅使用语法糖来简化操作

// 配置: vite.config.ts 中配置插件 vue ,调用 vue 方法时,传入配置参数 reactivityTRansform:true
// vue({reactivityTRansform:true})

// 在使用语法糖函数实现功能时需从 'vue/macros' 导入

// ref() => $ref()  computed() => $computed()  toRef() => $toRef()  toRefs() => $()
// 在使用响应式语法糖函数后,直接调用其值为 ref.value
// 对于原始值,访问的是一个原始值,对于一个对象,访问的是普通对象,但是其具有响应式特点
// 注意:可以调用 $$() 将响应式语法糖的响应式数据转化为 Ref 对象
// 使用 watch 时,需采用 ()=>value 或 $$(value) 形式


let count = $ref<number>(0)
console.log(count)
setTimeout(() => {
  count++
  console.log(count)
}, 1000)
// 此时 count 为原始值，直接访问 count 由于采用了响应式语法糖，会访问到 count.value
watch($$(count), () => {
  // 调用 $$() 会将响应式语法糖的原始值转化为 Ref 对象，仅会对响应式语法糖的原始值生效
  console.log($$(2))
  console.log($$(count))
  console.log('count change')
})
interface Peroson {
  name: string
  age: number
}
const obj = reactive<Peroson>({
  name: 'Tom',
  age: 20,
})
// 使用 toRefs 提取响应式对象中的属性作为响应式数据，其形式为 Ref 对象，访问值需 value
// let { name, age } = toRefs(obj)
// console.log(name, age)
// 采用 $() 替代 toRefs 实现响应式语法糖
let { name, age } = $(obj)
console.log(name, age)
</script>
<style scoped lang="less"></style>
